<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="书名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="form.author"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toAddBook">addBook</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {addBook} from "@/api";

    export default {
        name: "AddBook",
        data(){
            return {
                form:{
                    name: '',
                    author: '',
                    price: ''
                }
            }
        },
        created(){
            console.log(typeof this.$route.params.book)
            if (typeof this.$route.params.book != 'undefined'){
                this.form.name = this.$route.params.book.name
                this.form.author = this.$route.params.book.author
                this.form.price = this.$route.params.book.price
            }
        },
        methods:{
            async toAddBook(){
                let result = await addBook({name:this.form.name,author:this.form.author,price:this.form.price})
                console.log(result)
                this.$router.push('/books')
            }
        }
    }
</script>

<style scoped>

</style>
